<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="刘怼怼"content="2350716841@qq.com">
    <link rel="shortcut icon" href="img/icon.png" type="image/x-icon">
    <title>卖座网</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/public.css">
    <style>
        .cards {
            z-index: 1000;
            position: fixed;
            /* top后期会漏一像素 */
            top: 44px;    
            width: 100%;
            height: 5rem;
            display: flex;
            justify-content: space-around;
            border-bottom: 1px solid #eee;
            background-color: white;
        }

        .cards p {
            line-height: 5rem;
            font-size: 1.4rem;
        }

        .cards p.checked {
            color: var(--main-color);
            font-size: 1.4rem;
            border-bottom: 2px solid var(--main-color);
            ;
        }

        ul {
            padding-top: 94px;
            padding-bottom: 50px;
        }

        ul li {
            height: 124px;
            padding: 10px;
            display: flex;
            border-bottom: 1px solid #eee;
            z-index: 10000;
        }

        ul li img {
            width: 68px;
            height: 104px;
        }

        ul li div {
            width: 0;
            height: 104px;
            flex-grow: 1;
            margin: 0 10px;
        }

        ul li div p {
            color: rgb(121, 125, 130);
            font-size: 1.4rem;
            margin: .7rem 0;
            line-height: 1.8rem;
            height: 1.8rem;
            overflow: hidden;
        }

        ul li div p.title {
            font-size: 1.7rem;
            color: black;

        }

        ul li div p .score {
            color: #ffb232;
        }

        ul li .buy {
            width: 50px;
            height: 25px;
            border: 1px solid var(--main-color);
            text-align: center;
            line-height: 25px;
            align-self: center;
        }
    </style>
</head>

<body>
    <!-- 顶部结构 -->
    <h1>卖座网</h1>
    <h2 id="alert_user">请使用移动端打开</h2>
    <div class="container">
        <nav class="up">
            <p><span id="cityName" style="margin-left: 1rem; font-size: 1.2rem;">北京</span></p>
            <p><span style="text-align: center; font-size: 1.8rem">电影</span></p>
            <p><span></span></p>
        </nav>

        <!-- 中间结构 -->
        <div class="cards">
            <p id="hot" class="checked">正在热映</p>
            <p id="will">即将上映</p>
        </div>
        <ul>
            <!-- <li>
                <img src="" alt="">
                <div>
                    <p class="title">模仿游戏</p>
                    <p>观众评分<span class="score">7.4</span></p>
                    <p>主演:卷福</p>
                    <p><span>美剧</span> | <span>100分钟</span></p>
                </div>
                <p class="buy">购买</p>
            </li> -->
        </ul>

        <!-- 底部结构 -->
        <nav class="down">
            <a class="checked" href="###">
                <span style="font-size: 2.2rem;">&#xe679</span>
                <span>电影</span>
            </a>
            <a href="###">
                <span style="font-size: 2.2rem;">&#xe8c0</span>
                <span>影院</span>
            </a>
            <a href="###">
                <span style="font-size: 2.2rem;">&#xe609</span>
                <span>咨询</span>
            </a>
            <a href="###">
                <span style="font-size: 2.2rem;">&#xe61a</span>
                <span>我的</span>
            </a>
        </nav>
        <div id="loading">
            <div class="circle"></div>
            <p>加载中</p>
        </div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/request.js"></script>

<script>

    //先判端本地是否有城市
    if (!localStorage.city) {
        //如果没有
        localStorage.city = JSON.stringify({
            id: "110100",
            name: "北京"
        })
    }
    //显示当前城市
    function showCity(){
        var obj = JSON.parse(localStorage.city);
        $("#cityName").html(obj.name);
    }
    showCity();
    $("#cityName").click(function(){
        location.href ="city.html"
    })

    //调用数据
    getNowHotData(function (res) {
        setUl(res.data.films);
    })

    function setUl(films) {
        $("ul").html("")    //进来先置空
        films.forEach(function(film) {
            var actors = [];
            film.actors.forEach(function(actor){
                actors.push(actor.name);
            })
            $(`
                <li>
                    <img src="${film.poster}" alt="">
                    <div>
                        <p class="title">${film.name}</p>
                        <p>观众评分<span class="score">${film.grade?film.grade:""}</span></p>
                        <p>主演:${actors.join(" ")}</p>
                        <p><span>${film.nation}</span> | <span>${film.runtime}</span></p>
                    </div>
                    <p class="buy">购买</p>
                </li>
            `).appendTo($("ul"));
        })
    }

    //给选项卡添加点击事件

    $(".cards p").click(function(){
        //1.修改样式  只是对按钮进行了选中的一个情况
        $(this).addClass("checked")
               .siblings()
               .removeClass("checked")
    })
    $("#hot").click(function(){
        getNowHotData(function(res){
            setUl(res.data.films);
        })
    })

    //点击即将上映去调用数据
    $("#will").click(function(){
        getWillData(function(res){
            setUl(res.data.films);
        })
    })
</script>

</html>